<template>
  <router-layout>
    <div class="myPrize">
      <div class="banner" v-if="listQuery.company_id == 6">
        <img
          class="image"
          src="https://gw.alicdn.com/tfs/TB1oqBkOhTpK1RjSZR0XXbEwXXa-750-340.png"
          alt
        >
        <div class="text">
          <p style="text-align:center; font-size:43px">{{integral}}</p>
          <p style="text-align:center;">我的积分</p>
        </div>
        <div></div>
      </div>
      <div class="search">
        <div>{{month || "本月" }}</div>
        <div class="date">
          <p @click="screen()">筛选</p>
          <img
            @click="dateTime()"
            style="width:13px;height:14px;margin-left:10px;margin-top:3px;"
            src="https://gw.alicdn.com/tfs/TB12SpqOgHqK1RjSZFEXXcGMXXa-200-200.png"
          >
        </div>
      </div>
      <van-popup v-model="isShow" position="bottom" :overlay="true">
        <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
      </van-popup>
      <van-popup v-model="isShow1" position="bottom" :overlay="true">
        <van-datetime-picker v-model="currentDate" type="year-month" @confirm="onAccomplish"/>
      </van-popup>
      <div class="content-box">
        <Nodata v-if="!dataList.length"></Nodata>
        <van-list v-else v-model="loading" :finished="finished" @load="onLoad" :offset="300">
          <van-cell v-for="item in dataList" :key="item.id">
            <div class="prize">
              <div class="prize_list">
                <div class="integral">
                  <p class="action">+{{item.score}}</p>
                  <p class="type">{{item.behavior_desc}}</p>
                </div>
                <div class="line"></div>
                <div class="left">
                  <p class="name">{{item.create_time}}</p>
                  <p class="type">流水号：{{item.record_code}}</p>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </router-layout>
</template>
<script>
import {
  admin_listIntegralRecord,
  admin_listIntegralType,
  AmountntegralRecord
} from "@/api/admin";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import view_title from "../../components/public/title/title";
import moment from "moment";

export default {
  name: "MyPrize",
  components: { Nodata, view_title },
  data() {
    return {
      currentDate: new Date(),
      columns: [],
      isShow: false,
      isShow1: false,
      total: "",
      month: "", //月份
      loading: false,
      finished: false,
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId") - 0,
        integraltype_id: this.integraltype_id || 0,
        create_month: ""
      },
      dataList: [],
      integral: ""
    };
  },
  methods: {
    //获取选中的类型
    //   pitch(item){
    //       this.listQuery.integraltype_id = item.id;
    //       this.isShow = false;
    //       this.initList();
    //   },
    //获取选中的时间
    onAccomplish(value) {
      this.listQuery.create_month = moment(value).format("YYYY-MM");
      this.isShow1 = false;
      this.initList();
      this.month = moment(value).format("MM");
    },
    //   打开时间选项
    dateTime() {
      this.isShow1 = true;
    },
    // 打开类型选项
    screen() {
      this.isShow = true;
    },
    // 类型关闭按钮
    onCancel() {
      this.isShow = false;
    },
    onConfirm(value, index) {
      this.listQuery.integraltype_id = value.id;
      this.isShow = false;
      this.initList();
    },
    // 获取积分数据
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let { data } = await admin_listIntegralRecord(query);
      if (data.status == 100) {
        this.dataList = data.data.rows;
        this.total = data.data.results;
      }
      this.loading = false;
      if (data.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    //获取类型数据
    async type() {
      let res = await admin_listIntegralType();
      this.typeData = res.data.data.rows;
      this.columns = this.typeData.map(item => {
        return { id: item.id, text: item.integraltype_name };
      });
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 5;
        this.initList();
      }, 1000);
    },
    async Amountntegral() {
      let { data } = await AmountntegralRecord();
      this.integral = data.data.amonutScore;
      localStorage.setItem("integral", this.integral);
    }
  },
  created: function() {
    this.listQuery.create_month = moment(new Date())
      .add("year", 0)
      .format("YYYY-MM");
    this.initList();
    this.type();
    this.Amountntegral();
  }
};
</script>
<style lang="scss" scoped>
@import "Integral";
.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  .image {
    width: 100%;
  }
  .integralDetail {
    top: 10%;
    right: -3%;
    background: #ec6f6f;
    border-radius: 16px;
    position: absolute;
    font-size: 16px;
    color: #ffffff;
    width: 106px;
    height: 32px;
    text-align: center;
    line-height: 32px;
  }
  .text {
    font-size: 15px;
    color: #ffffff;
    position: absolute;
    top: 20%;
    right: 41%;
  }
}
</style>
